<template>
  <!-- 第六屏 高速公路桃仙分公司管段概述 -->
  <div class="containerWrapExpress">
    <!-- 内容 -->
    <el-row class="containerWrap">
      <!-- 标题 高:90px -->
      <el-row class="commonHeader">
        <div>高速公路桃仙分公司管段概述</div>
      </el-row>
      <!-- 数据 -->
      <el-row class="cardWrap" type="flex">
        <el-col :span="7" class="cardColumn" type="flex">
          <el-row class="card">
            <el-row class="cardHeader">网络综合评分</el-row>
            <el-row class="chartsWrap">
              <OneLineCharts
              :chart-data="chartsDataOne"
              />
            </el-row>
          </el-row>
          <el-row class="card">
            <el-row class="cardHeader">网络综合得分趋势</el-row>
            <el-row class="chartsWrap">
              <FiveLineCharts
                :chartData="chartDataTwo"
              />
            </el-row>
          </el-row>
          <el-row class="card">
            <el-row class="cardHeader">终端设备监控统计</el-row>
            <el-row class="chartsWrap">
              <Table3
                :data-list="tableData3"/>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="10" class="cardColumn" type="flex">
          <el-row>
            <Table2
              style="width: 70%;margin: 0 15%;z-index: 10"/>
          </el-row>
        </el-col>
        <el-col :span="7" class="cardColumn" type="flex">
          <el-row class="card" style="height: 10%;background: rgba(153,204,204,.15);display: flex;flex-direction: row;align-items: center;width: 100%">
            <el-row class="chartsWrap" type="flex" style="height: 82px;flex-direction: row;width: 100%">
              <el-col :span="12" style="display: flex;flex-direction: row">
                <div style="width: 64px;height: 82px;position: relative;padding: 0 30px">
                  <div style="position: absolute;width: 30px;height: 30px;top:10px;left:47px">
                    <img width="30px" src="../../assets/images/green_icon.png">
                  </div>
                  <div style="position: absolute;width: 64px;height: 64px;bottom:-8px;">
                    <img width="64px" src="../../assets/images/green_bg.png">
                  </div>
                </div>
                <div style="width: calc(100% - 64px)" >
                  <el-row style="font-size: 14px;height: 28px;line-height: 28px;padding-top: 8px">在线数量</el-row>
                  <el-row class="onlineNum">
                    <countTo :startVal="0" :endVal="15888" :duration="2000" style="padding: 0"/><span style="font-size: 16px">台</span>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="12" style="display: flex;flex-direction: row">
                <div style="width: 64px;height: 82px;position: relative;padding: 0 30px">
                  <div style="position: absolute;width: 30px;height: 30px;top:10px;left:47px">
                    <img width="30px" src="../../assets/images/orange_icon.png">
                  </div>
                  <div style="position: absolute;width: 64px;height: 64px;bottom:-8px;">
                    <img width="64px" src="../../assets/images/orange_bg.png">
                  </div>
                </div>
                <div style="width: calc(100% - 64px)" >
                  <el-row style="font-size: 14px;height: 28px;line-height: 28px;padding-top: 8px">离线数量</el-row>
                  <el-row class="onlineNum2">
                    <countTo :startVal="0" :endVal="7785" :duration="2000" style="padding: 0"/><span style="font-size: 16px">台</span>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-row>
          <el-row class="card" style="height: 39%">
            <el-row class="cardHeader">告警详细</el-row>
            <el-row class="chartsWrap">
              <Table
                :dataList="table1"
                style="padding: 10px 10px"
              >
              </Table>
            </el-row>
          </el-row>
          <el-row class="card">
            <el-row class="cardHeader">设备告警TOP5</el-row>
            <el-row class="chartsWrap">
              <BarCharts
                :chartData="chartData3"
              />
            </el-row>
          </el-row>
          <el-row class="card" style="height: 15%">
            <el-row class="cardHeader">图 例</el-row>
            <el-row class="chartsWrap legend">
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/lyq_48_noArow.png">
                <p>路由器</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/qiangssxj_48_noArow.png">
                <p>枪式摄像机</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/qiussxj_48_noArow.png">
                <p>快球摄像机</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/mj_48_noArow.png">
                <p>门架</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/mjqbb_48_noArow.png">
                <p>情报板</p>
              </div>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
    </el-row>

    <!-- 地图背景 -->
    <el-row class="mapWrap">
      <BaiduMap
        @clickPolyline="clickPolyline"
      />
    </el-row>
    <!-- 遮罩 -->
    <el-row class="mask"/>
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :custom-class="'myDialog'"
      :title="'G15桃仙分公司管段概述'"
      width="90%"
    >
      <el-row type="flex" style="height: 100%" :gutter="10">
        <el-col :span="8">
          <el-row class="card2" style="margin-top: 1%">
            <el-row class="cardHeader">G15网络综合评分</el-row>
            <el-row class="chartsWrap">
              <OneLineCharts
                :chart-data="chartsDataOneDialog"
              />
            </el-row>
          </el-row>
          <el-row class="card2">
            <el-row class="cardHeader">终端实时网络监控墙</el-row>
            <el-row class="chartsWrap">
              <Table3
                :data-list="tableDataDialog"/>
            </el-row>
          </el-row>
          <el-row class="card2">
            <el-row class="cardHeader">告警详细</el-row>
            <el-row class="chartsWrap">
              <Table
                :dataList="tableDialog"
                style="padding: 10px 10px"
              />
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="16" style="position: relative">
          <el-row style="height: 100%;">
            <BaiduMapDialog/>
          </el-row>
          <div class="card2" style="width: 500px;height: 120px;position: absolute;bottom: 0;right:10px">
            <el-row class="cardHeader">图 例</el-row>
            <el-row class="chartsWrap legend">
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/lyq_48_noArow.png">
                <p>路由器</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/qiangssxj_48_noArow.png">
                <p>枪式摄像机</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/qiussxj_48_noArow.png">
                <p>快球摄像机</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/mj_48_noArow.png">
                <p>门架</p>
              </div>
              <div class="legendIcon">
                <img src="../../assets/images/mapIcon/mjqbb_48_noArow.png">
                <p>情报板</p>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import BaiduMap from './components/BaiduMap'
import BaiduMapDialog from './components/BaiduMapDialog'
import OneLineCharts from './components/OneLineCharts'
import FiveLineCharts from './components/FiveLineCharts'
import Table from './components/Table'
import Table2 from './components/Table2'
import Table3 from './components/Table3'
import BarCharts from './components/BarCharts'
import countTo from 'vue-count-to'
export default {
  name: 'Expressway',
  components: {
    BaiduMap,
    BaiduMapDialog,
    OneLineCharts,
    FiveLineCharts,
    Table,
    Table2,
    Table3,
    BarCharts,
    countTo
  },
  data() {
    return {
      // baseURL: process.env.NODE_ENV === 'production' ? `http://anchor.msns.cn:9001/nqs-web` : `http://anchor.msns.cn:9001/nqs-web`, // 测试
      baseURL: process.env.NODE_ENV === 'production' ? `http://116.130.0.98:9001/nqs-web` : `http://116.130.0.98:9001/nqs-web`, // 生产
      num: 0,
      ltTestCount: 0,
      dxTestCount: 0,
      ydTestCount: 0,
      query: {
        user_level: null,
        user_code: ''
      },
      range: [],
      dataListLeft: [],
      dataListRight: [],
      gateway_quantity: 0,
      dial_test_time: 0,
      manage_quantity: 0,
      data_month: 0,
      tableDataType: 10,

      chartsDataOne: {
        dataLine: [33,24,45,36,27],
        dataY: [1,2,3,4,5]
      },
      chartDataTwo: {
        legend: ['G1501', 'G113', 'G15', 'G1', 'S3'],
        dataY: [1,2,3,4,5,6,7,8,9,10],
        dataLine1: [60,70,50,71,53,56,98,78,83,80],
        dataLine2: [60,61,83,76,98,78,83,70,90,72],
        dataLine3: [83,76,58,78,83,80,90,72,73,77],
        dataLine4: [98,78,83,70,90,82,83,77,82,84],
        dataLine5: [73,70,90,72,83,77,82,64,87,81],
      },
      table1: [
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
      ],
      table2: [
        { c1: 'G1501', c2: '沈阳绕城高速', c3: 90 },
        { c1: 'G1113', c2: '沈阜高速', c3: 96 },
        { c1: 'G15', c2: '沈海高速', c3: 98 },
        { c1: 'G1', c2: '京哈高速', c3: 99 },
        { c1: 'S3', c2: '沈桃高速', c3: 92 }
      ],
      tableData3: [
        {type: '路由器', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '枪式摄像机', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '快球摄像机', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '门架', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '情报板', num: 10, score: 20, rat: 50, lost: 78 }
      ],
      chartData3: {
        dataList: [
          { name: '路由器', value: 11 },
          { name: '枪式摄像头', value: 22 },
          { name: '球式摄像头', value: 66 },
          { name: '门架子', value: 33 },
          { name: '情报板', value: 99 },
        ],
        valueList: [11,22,66,33,99],
        bgList: [100,100,100,100]
      },
      dialogVisible: false,
      chartsDataOneDialog: {
        dataLine: [33,24,45,36,27],
        dataY: [1,2,3,4,5]
      },
      tableDataDialog: [
        {type: '路由器', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '枪式摄像机', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '快球摄像机', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '门架', num: 10, score: 20, rat: 50, lost: 78 },
        {type: '情报板', num: 10, score: 20, rat: 50, lost: 78 }
      ],
      tableDialog: [
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
        { detail: '链路告警', level: 2, time: '2012-11-11' },
      ],
    }
  },
  created() {
  },
  mounted() {
    // this.repeatInFive()
  },
  // 离开页面结束循环
  beforeRouteLeave(to, from, next) {
    if (this.timer) {
      clearInterval(this.timer)
    }
    next()
  },
  methods: {
    clickPolyline() {
      this.dialogVisible = true
    },
    currentPageChangeLeft(val) {
      this.currentPageLeft = val
    },
    repeatInFive() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.init()
      this.timer = setInterval(() => {
        this.init()
      }, 1000 * 60 * 5)
    },
    init(){
      // this.getTableLeftData()
      // this.getTableRightData()
      // this.getTestCount()
    }
  }
}
</script>
<style scope>
.containerWrapExpress{
  position: relative;
  height: 100vh;
}
.mapWrap{
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mask{
  pointer-events: none;
  background-color: transparent;
  box-shadow: 0 0 200px 60px #04070e inset;
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cardWrap{
  height: calc(100vh - 90px);
}
.cardColumn{
  height: 100%;
  padding: 0 20px;
  /*background: rgba(0,255,255,.2);*/
}
.card{
  z-index: 10;
  height: 32%;
  margin-bottom: 1%;
  font-size: 16px;
  color: white;
  background: url("../../assets/images/card_bg.png") scroll center no-repeat;
  background-size: 100% 100%;
  background-position-y: 6px;
}
.card2{
  z-index: 10;
  height: 32%;
  margin-bottom: 1%;
  font-size: 16px;
  color: white;
  background: url("../../assets/images/card_bg.png") scroll center no-repeat;
  background-size: 100% 100%;
  background-position-y: 6px;
}
.cardHeader{
  height: 20px;
  padding-left: 30px;
}
.chartsWrap{
  height: calc(100% - 20px);
}
.legend{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.legendIcon{
  width: 90px;
  height: 65px;
  padding: 8px 0;
  background: url("../../assets/images/mapIcon/box_bg.png") scroll center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 14px;
}
.tzNumberNum > span {
  font-size: 16px;
  padding-left: 4px;
}
.commonHeader {
  width: 100%;
  z-index: 10;
  background: url("../../assets/images/header_bg2.png") scroll center no-repeat;
  background-size: 100% 100%;
  /*position: relative;*/
  display: flex;
  height: 90px;
  line-height: 90px;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  letter-spacing: 4px;
}
.onlineNum{
  font-size: 28px;
  height: 54px;
  line-height: 54px;
  text-align: left;
  /*padding: 0 20px;*/
  color: rgb(55, 252, 188);
}
.onlineNum2{
  height: 54px;
  line-height: 54px;
  text-align: left;
  font-size: 28px;
  /*padding: 0 20px;*/
  color: rgb(241, 143, 36);
}
.iconDesc{
  height: 60px;
  line-height: 48px;
  padding: 6px 0;
  font-size: 16px;
}
.anchorBL{
  display: none!important;
}
.BMap_cpyCtrl{
  display: none!important;
}
@media only screen and (min-width: 1921px) {
  .commonHeader {
    font-size: 36px;
  }
}
@media only screen and (max-width: 1920px) {
  .commonHeader {
    font-size: 36px;
  }
}
@media only screen and (max-width: 1600px) {
  .commonHeader {
    font-size: 28px;
  }
}
</style>
<style>
.el-dialog__header{
  /*display: none;*/
  color: #FFFFFF;
  background-color: rgb(9, 18, 32)!important;
}
.el-dialog__body{
  background-color: rgb(9, 18, 32)!important;
}
.el-dialog__wrapper{
  background-color:rgba(0,0,0,0.7);
}
.myDialog{
  margin-top: 5vh!important;
}
.el-dialog__body{
  height: calc(84vh - 4px)!important;
  padding: 8px;
}
.el-dialog__title{
  color: #05adcb;
  font-size: 24px;
}
</style>